export const show2 = () => {
    return {
      "App.vue":`

      <template>
      <div class="content">
        <show2 />
      </div>
    </template>
    
    <script setup>
    import { ref, reactive, nextTick, onMounted, watch } from "vue";
    import show2 from "./show2.vue";
    
    onMounted(() => {});
    </script>
    
    <style scoped>
    .content {
      width: 100%;
      padding-top: 100px;
      background: #042c67;
      height: 492px;
      display: flex;
      justify-content: center;
    }
    </style>
    
    
    
      `,
      "src/show2.vue":`

      <template>
      <div
        class="show2Box"
        :style="{
          width: width + 'px',
          height: '100%',
        }"
      >
        <div class="rotateBox">
          <div class="rotateContent">
            <div class="rotateItem">
              <div class="routeText1">
                1022
              </div>
              <div class="routeText2">
              购物车数量
              </div>
            </div>
            <div class="rotateItem">
              <div class="routeText1">
                860
              </div>
              <div class="routeText2">
              购物车数量
              </div>
            </div>
            <div class="rotateItem">
              <div class="routeText1">
                1022
              </div>
              <div class="routeText2">
              购物车数量
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script setup>
    import {
      ref,
      reactive,
      defineEmits,
      onMounted,
      onUpdated,
      computed,
    } from "vue";
    const props = defineProps({
      width: {
        type: Number,
        default: 600,
      },
      height: {
        type: Number,
        default: 600,
      },
      item: {
        type: Object,
        default: () => {
          return {
            icon: "/vue.example/static/card1.png",
            title: "3200",
            subTitle: "已回款(万元)",
          };
        },
      },
    });
    
    onUpdated(() => {});
    </script>
    
    <style scoped>
    .show2Box {
      position: relative;
    }
    
    .rotateBox {
      width: 600px;
      margin: 100px auto;
      height: 136px;
      background-image: url(/vue.example/static/yuanpan.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      position: relative;
    }
    .rotateContent {
      height: 100%;
      position: relative;
      width: 100%;
    }
    .rotateItem {
      height: 137px;
      width: 142px;
      position: absolute;
      top: 0;
      left: 230px;
    }
    
    .routeText1 {
      font-weight: 800;
      font-size: 30px;
      color: #ffffff;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      position: absolute;
    }
    .routeText2 {
      font-weight: 500;
      font-size: 16px;
      color: #d3e4fe;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%) translateY(150%);
      position: absolute;
      white-space: nowrap;
    }
    
    .rotateContent .rotateItem:nth-child(1) {
      transform: translateX(-250px) scale(0.85);
      background-image: url(/vue.example/static/feipan.png);
      background-repeat: no-repeat;
      background-position: center;
      top: -30px;
      background-size: 100% 100%;
    }
    
    .rotateContent .rotateItem:nth-child(2) {
      transform: translateX(0) scale(1);
      background-image: url(/vue.example/static/feipan.png);
      background-repeat: no-repeat;
      background-position: center;
      top: 30px;
      background-size: 100% 100%;
    }
    
    .rotateContent .rotateItem:nth-child(3) {
      background-image: url(/vue.example/static/feipan.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      top: -30px;
      transform: translateX(250px) scale(0.85);
    }
    </style>
    
      
      
    
      
      `
    }
   
  };
  